<!-- 组合式 -->
<script setup lang="ts">
	const props = withDefaults(defineProps<{
		backgroundColor ?: string,
		borderRadius ?: string,

		modelValue ?: number | string,
		tab ?: object,
		name ?: string,
		keyName ?: string,
		
		type ?: string,
		size ?: string,
		bottomLine ?: boolean,
		gap ?: string,
	}>(), {
		backgroundColor: 'transparent',
		borderRadius: '4px',

		modelValue: '',
		tab: () => [],
		name: 'name',
		keyName: 'id',

		type: 'primary',
		size: 'normal',
		bottomLine: false,
		gap: '40px',
	})

	// 切换选项
	function changeTabI(item : any) {
		// console.log(props);
		emit('update:modelValue', item[props.keyName]);
	}

	// 回调
	const emit = defineEmits(['change', 'update:modelValue'])
</script>


<template>
	<div class="" :style="{backgroundColor, borderRadius}">
		<div class="l-tab" :style="{gap}">
			<div class="l-tab-li" :class="[type, (modelValue == item[keyName] && 'chose')]" v-for="(item,index) in tab"
				:key="index" @click="changeTabI(item)">
				{{item[name]}}

				<!-- 下标线 -->
				<div class="bottom-line" :class="{'active': modelValue == item[keyName]}" v-if="bottomLine" />
			</div>
		</div>
	</div>
</template>


<style lang="scss" scoped>
	$color: #5173F2;

	.l-tab {
		display: flex;
		// justify-content: space-between;
		align-items: center;
		// gap: 40px;

		// 写下面了，太臃肿了
		.l-tab-li {}
	}

	.l-tab-li {
		cursor: pointer;
		position: relative;
		transition: .3s;
		
		// 选中 底部条
		.bottom-line {
			position: absolute;
			bottom: 0;
			left: 0;
			height: 3px;
			background: #0A79FF;
			transition: .3s;
			width: 0%;
		
			&.active {
				width: 100%;
			}
		}
		
		// 类型 type
		&.primary {

			width: 150px;
			text-align: center;
			background: #FFFFFF;
			border-radius: 4px 4px 4px 4px;
			line-height: 50px;
			
			font-size: 20px;
			color: #777777;

			&.chose {
				font-weight: bold;
				color: #FFFFFF;
				background: $color;
			}
		}

		&.second {
			width: 90px;
			line-height: 45px;
			text-align: center;
			font-size: 16px;
			color: #666666;

			&:hover {
				background-color: #ECF5FF;
			}

			&.chose {
				font-weight: bold;
				color: #5173F2;
			}
		}

		&.third {
			font-size: 24px;
			line-height: 88px;
			
			&.chose {
				font-weight: bold;
				color: #5173F2;
			}
			
			// 选中 底部条
			.bottom-line {
				left: 50%;
				width: 0;
				height: 7px;
				transform: translateX(-50%);
				
				&.active {
					width: 44px;
				}
			}
		}

		&.fourthly {
			
			&.chose {
				font-weight: bold;
				// color: #5173F2;
			}
		}
		
	}



	// 大小 size
	.normal {}

	.small {}

	.minimality {}
</style>